<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.productSn" clearable placeholder="产品SN" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />

        <el-select
          v-model="query.productCode"
          clearable
          filterable
          placeholder="产品型号"
          style="width: 185px"
          class="filter-item"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in productModel"
            :key="item.id"
            :label="item.productName"
            :value="item.productCode"
          >
            <span style="float: left">{{ item.productName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.productCode }}</span>
          </el-option>
        </el-select>

        <el-input v-model="query.orderCode" clearable placeholder="订单编号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-input v-model="query.workOrderCode" clearable placeholder="工单编号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.result" clearable filterable
                   placeholder="产品状态" style="width: 185px;" class="filter-item" @change="crud.toQuery" >
          <el-option
            v-for="item in dict.result_status"
            :key="item.id"
            :label="item.label"
            :value="item.value" />
        </el-select>

<!--        <date-range-picker  class="date-item" v-model="query.createTime"></date-range-picker>-->

        <el-date-picker
          class="filter-item"
          v-model="query.createTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>

        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="产品SN" prop="productSn">
            <el-input v-model="form.productSn" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="产品型号" prop="productCode">
            <el-input v-model="form.productCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="产品类型" prop="productType">
            <el-input v-model="form.productType" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="订单编号" prop="orderCode">
            <el-input v-model="form.orderCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工单编号" prop="workOrderCode">
            <el-input v-model="form.workOrderCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="结果" prop="result">
            <el-select v-model="form.result" filterable placeholder="请选择">
              <el-option
                v-for="item in dict.result_status"
                :key="item.id"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="产线编号" prop="lienCode">
            <el-input v-model="form.lienCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工段编号" prop="sectionCode">
            <el-input v-model="form.sectionCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="开始加工时间">
            <el-date-picker v-model="form.startTime" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="结束加工时间">
            <el-date-picker v-model="form.endTime" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工艺路线编号" prop="pathCode">
            <el-input v-model="form.pathCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工艺路线版本" prop="pathVersion">
            <el-input v-model="form.pathVersion" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工艺参数编号" prop="paramsCode">
            <el-input v-model="form.paramsCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="工艺参数版本" prop="paramsVersion">
            <el-input v-model="form.paramsVersion" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="BOM编号" prop="bomCode">
            <el-input v-model="form.bomCode" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="BOM版本" prop="bomVersion">
            <el-input v-model="form.bomVersion" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="创建人">
            <el-input v-model="form.createBy" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="form.createTime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="更新人">
            <el-input v-model="form.updateBy" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input v-model="form.updateTime" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data"   size="small" style="width: 100%;"
        @selection-change="crud.selectionChangeHandler" :cell-style="cellStyle">
        <el-table-column type="selection" width="55"/>
        <el-table-column resizable fixed="left" width="200"  align="center"   prop="productSn" label="产品SN" />
        <el-table-column resizable width="80"  align="center"   prop="gear" label="档位" />
        <el-table-column resizable width="150" align="center"   prop="productCode" label="产品型号" />
        <el-table-column resizable width="150" align="center"   prop="orderCode" label="订单编号" />
        <el-table-column resizable width="150" align="center"   prop="workOrderCode" label="工单编号" />
        <el-table-column resizable width="80" align="center"   prop="result" label="产品状态">
          <el-tag slot-scope="scope" :type="getResultStatus(scope.row.result)" >
            {{ dict.label.result_status[scope.row.result] }}
          </el-tag>
        </el-table-column>
        <el-table-column resizable width="80" align="center"   prop="lienCode" label="产线编号" />

        <el-table-column resizable width="160" align="center"   prop="startTime" label="开始加工时间" />
        <el-table-column resizable width="160" align="center"   prop="endTime" label="结束加工时间" />

        <el-table-column resizable width="150" align="center"   prop="bomCode" label="BOM编号" />
        <el-table-column resizable width="80" align="center"   prop="bomVersion" label="BOM版本" />

        <el-table-column align="center" width="160"  prop="sectionCode" label="工段编号" />
        <el-table-column align="center" width="160"  prop="pathCode" label="工艺路线编号" />
        <el-table-column align="center" width="160"  prop="shiftCode" label="班次编码" />
        <el-table-column align="center" width="160"  prop="pathVersion" label="工艺路线版本" />
        <el-table-column align="center" width="160"  prop="paramsCode" label="工艺参数编号" />
        <el-table-column align="center" width="160"  prop="paramsVersion" label="工艺参数版本" />
        <el-table-column align="center" width="160"  prop="createBy" label="创建人" />
        <el-table-column align="center" width="160"  prop="createTime" label="创建时间" />
        <el-table-column align="center" width="160"  prop="updateBy" label="更新人" />
        <el-table-column align="center" width="160"  prop="updateTime" label="更新时间" />
        <el-table-column  resizable label="操作" width="150px" align="center" fixed="right">
          <template slot-scope="scope">
            <router-link slot="view" :to="'/data/cell/cellMainDetail/' + scope.row.id">
              <el-button size="mini" type="primary" plain>  详情 </el-button>
            </router-link>
          </template>
        </el-table-column>
        <span v-if="crud.data.length != '0'">
          <el-table-column align="center" v-for="(title, index) in crud.data[0].craftParam" :key="index" :label="title.paramName">
            <template slot-scope="scope">
              <span v-if="scope.row.craftParam.length != '0'">{{scope.row.craftParam[index].standard}}</span>
            </template>
          </el-table-column>
        </span>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
  import crudCellDataMain from "@/api/data/dataMain"
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import crudProductModel from '@/api/product/productModel'

  const defaultForm = { id: null, productSn: null, productCode: null, productType: 'C', orderCode: null, workOrderCode: null, result: null, lienCode: null, sectionCode: null, startTime: null, endTime: null, pathCode: null, pathVersion: null, paramsCode: null, paramsVersion: null, bomCode: null, bomVersion: null, untitled1: null, untitled2: null, untitled3: null, createBy: null, createTime: null, updateBy: null, updateTime: null }
  export default {
    name: 'DataMain',
    components: { pagination, crudOperation, rrOperation, udOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['result_status'],
    cruds() {
      return CRUD({ title: '电芯数据', url: 'api/dataMain', idField: 'id', sort: 'id,desc', crudMethod: { ...crudCellDataMain },optShow:{add: false,
          edit: false,
          del: false,
          download: true,
          reset: true,
          import: false}})
    },
    data() {
      return {
        productModel:[],
        pickerOptions: {
          shortcuts: [{
            text: '最近24小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一星期',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        permission: {
          add: ['admin', 'dataMain:add'],
          edit: ['admin', 'dataMain:edit'],
          del: ['admin', 'dataMain:del']
        },
        rules: {
          productSn: [
            { required: true, message: '产品SN不能为空', trigger: 'blur' }
          ],
          productCode: [
            { required: true, message: '产品型号不能为空', trigger: 'blur' }
          ],
          productType: [
            { required: true, message: '产品类型不能为空', trigger: 'blur' }
          ],
          orderCode: [
            { required: true, message: '订单编号不能为空', trigger: 'blur' }
          ],
          workOrderCode: [
            { required: true, message: '工单编号不能为空', trigger: 'blur' }
          ],
          result: [
            { required: true, message: '结果不能为空', trigger: 'blur' }
          ],
          lienCode: [
            { required: true, message: '产线编号不能为空', trigger: 'blur' }
          ],
          sectionCode: [
            { required: true, message: '工段编号不能为空', trigger: 'blur' }
          ],
          pathCode: [
            { required: true, message: '工艺路线编号不能为空', trigger: 'blur' }
          ],
          pathVersion: [
            { required: true, message: '工艺路线版本不能为空', trigger: 'blur' }
          ],
          paramsCode: [
            { required: true, message: '工艺参数编号不能为空', trigger: 'blur' }
          ],
          paramsVersion: [
            { required: true, message: '工艺参数版本不能为空', trigger: 'blur' }
          ],
          bomCode: [
            { required: true, message: 'BOM编号不能为空', trigger: 'blur' }
          ],
          bomVersion: [
            { required: true, message: 'BOM版本不能为空', trigger: 'blur' }
          ]
        },
        queryTypeOptions: [
          { key: 'id', display_name: 'ID' },
          { key: 'productSn', display_name: '产品SN' },
          { key: 'productCode', display_name: '产品型号' },
          { key: 'productType', display_name: '产品类型' },
          { key: 'orderCode', display_name: '订单编号' },
          { key: 'workOrderCode', display_name: '工单编号' },
          { key: 'result', display_name: '结果' },
          { key: 'lienCode', display_name: '产线编号' },
          { key: 'sectionCode', display_name: '工段编号' },
          { key: 'pathCode', display_name: '工艺路线编号' },
          { key: 'pathVersion', display_name: '工艺路线版本' },
          { key: 'paramsCode', display_name: '工艺参数编号' },
          { key: 'paramsVersion', display_name: '工艺参数版本' },
          { key: 'bomCode', display_name: 'BOM编号' },
          { key: 'bomVersion', display_name: 'BOM版本' },
          { key: 'untitled1', display_name: '预留1' },
          { key: 'untitled2', display_name: '预留2' },
          { key: 'untitled3', display_name: '预留3' },
          { key: 'createBy', display_name: '创建人' },
          { key: 'updateBy', display_name: '更新人' }
        ]
      }
    },
    methods: {
      //获取当前工序状态颜色
      getResultStatus(result){
        if(result == '1' ){
          return 'success';
        }else if(result == '0'){
          return 'danger';
        }else if(result == '4'){
          return 'info';
        }else{
          return '';
        }
      },
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh](crud) {
        crud.params.productType='C';
        return true
      },
      // // 钩子：在重置之前
      // [CRUD.HOOK.beforeReset](crud) {
      //   this.query.productCode = this.productModel[0].productCode;
      //   this.crud.toQuery();
      //   return false
      // },
      // // 钩子：在重置之后
      // [CRUD.HOOK.afterReset](crud) {
      //   this.query.productCode = this.productModel[0].productCode;
      //   this.crud.toQuery();
      //   return true
      // },
      cellStyle({row,column,rowIndex,columnIndex}){
        if(rowIndex == rowIndex){
          if(row.result == '0'){
            if(columnIndex > '19'){
              return 'color:#F56C6C'
            }
          }
        }
      }
    },
    mounted() {
      crudProductModel.list({productType: "C"}).then((data) => {
        this.productModel = data;
        // this.query.productCode = this.productModel[0].productCode;
        // this.crud.toQuery();
      });
    }
  }
</script>

<style scoped>

</style>
